<script setup>
import { ref, onMounted } from "vue"

// 定义 props 来接收父组件传入的数据
const props = defineProps({
  videoJsonData: {
    type: String,
    required: true
  }
})

// 添加一个响应式变量来控制是否显示iframe
const showIframe = ref(true)

const closeThisPage = () => {
  console.log('closeThisPage')
  // 强制终止iframe
  showIframe.value = false
  
  // 可选：通过DOM直接操作iframe
  const iframe = document.querySelector('iframe')
  if (iframe) {
    // 移除iframe的src属性来停止加载
    iframe.src = 'about:blank'
    // 或者完全移除iframe元素
    iframe.remove()
  }
}

const openThisPage = () => {
  console.log('openThisPage')
  // 重新打开iframe
  showIframe.value = true
}

// 暴露方法给父组件
defineExpose({
  openThisPage,
  closeThisPage
})

const iframeError = ref(false)

const handleIframeError = () => {
  iframeError.value = true
  console.log('iframe加载失败，可能是跨域限制')
}

const handleLoad = () => {
  // 获取iframe元素
  // const iframe = document.querySelector('iframe')
  // if (iframe) {
  //   // 将iframe向右缩减500px，去掉左边500px区域
  //   iframe.style.width = '1300px'  // 原来1800px - 500px = 1300px
  //   iframe.style.marginLeft = '500px'  // 向右移动500px，露出右边部分
  // }
}
</script>

<template>
  <div class="app">
    <h1>模板展示</h1>

    <!-- 如果iframe加载失败，显示备用方案 -->
    <div v-if="iframeError" class="error-container">
      <p>无法直接嵌入该页面，可能是由于跨域限制。</p>
      <p>请点击下方链接在新窗口中打开：</p>
      <a :href="props.videoJsonData" target="_blank" class="external-link">
        {{ props.videoJsonData }}
      </a>
    </div>

    <!-- iframe容器 - 添加v-if条件 -->
    <div v-else-if="showIframe" class="iframe-container">
      <div class="iframe-wrapper">
        <iframe
          :src="props.videoJsonData"
          width="1800"
          height="600"
          frameborder="0"
          allowfullscreen
          title="视频内容"
          sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-presentation"
          @error="handleIframeError"
          @load="handleLoad"
        ></iframe>
      </div>
    </div>

  </div>
</template>

<style scoped>
.app {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.iframe-wrapper {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  width: 1800px;
  height: 600px;
  transform: translateX(-36%); /* 向左移动30%，让右半部分显示在容器内 */
}

iframe {
  display: block;
  border: none;
  width: 1800px;
  height: 600px;
}

.iframe-container {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 500px; /* 只显示右半部分，所以宽度是原来的一半 */
  height: 300px;
  position: relative;
}

.error-container {
  padding: 20px;
  text-align: center;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  margin: 20px 0;
}

.error-container p {
  margin: 10px 0;
  color: #6c757d;
}

.external-link {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 10px;
}

.external-link:hover {
  background-color: #0056b3;
}

.closed-message {
  padding: 20px;
  text-align: center;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  margin: 20px 0;
}

.closed-message p {
  margin: 10px 0;
  color: #6c757d;
  font-size: 16px;
}
</style>
